<template>
  <div class="list-like-form">
    <base-form :form="form">
      <el-form-item v-if="!disableListArea" label-width="0">
        <div class="flex-between">
          <span>{{ $t('列表') }}</span>
          <div class="list-btns">
            <el-button class="list-btn" type="primary" @click="openDialog('viewport')">{{ $t('视图') }}</el-button>
            <el-button class="list-btn" type="primary" @click="openDialog('edit')">{{ $t('编辑') }}</el-button>
          </div>
        </div>
      </el-form-item> 
    </base-form>
    <template v-if="!disableListArea">
      <div class="list-box">
        <list
          :height="listHeight"
          row-key="_id"
          :list-data="listData"
          :list-cols="listCols"
          :action-opts="actionOpts"
          ></list>
      </div>

      <!-- 列表编辑弹窗 -->
      <list-edit-dialog
        :list.sync="programMedia.mediaArgus"
        :area-id="areaId"
        :visible.sync="editDialog.show"></list-edit-dialog>
      <!-- 视图弹窗 -->
      <viewport-dialog
        :visible.sync="viewportDialog.show"
        :time-view-list="timeViewList"
        :list-data="listData"></viewport-dialog>
    </template>
  </div>
</template>

<script>
import BaseForm from './BaseForm'
import List from '@/components/List'
import ListEditDialog from '../ListEditDialog'
import viewportDialog from '../viewportDialog'

export default {
  components: {
    BaseForm,
    List,
    ListEditDialog,
    viewportDialog
  },
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    programMedia: {
      type: Object,
      default() {
        return null
      }
    },
    areaId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listCols: [{
        label: '开始时间',
        prop: 'startDate',
        minwidth: 158
      }, {
        label: '结束时间',
        prop: 'endDate'
      }, {
        label: '媒体',
        prop: 'fileName'
      }],
      actionOpts: { show: false },
      editDialog: {
        show: false
      },
      viewportDialog: {
        show: false
      }
    }
  },
  computed: {
    listHeight() {
      const volTypes = ['Main', 'Audio', 'Mixed']
      return volTypes.indexOf(this.form.areaId.split('-')[0]) > -1 ? '188px' : '248px'
    },
    listData() {
      if (this.programMedia && this.programMedia.mediaArgus && this.programMedia.mediaArgus.length > 0) {
        let _list = [].concat(this.programMedia.mediaArgus)
        return this.list2treeList(_list, ['startDate', 'endDate'], 'startDate')
      } else {
        return []
      }
    },
    timeViewList() { // 时间视图列表
      if (this.programMedia && this.programMedia.mediaArgus && this.programMedia.mediaArgus.length > 0) {
        let _list = [].concat(this.programMedia.mediaArgus).map(item => {
          return {
            ...item,
            startTime: item.startDate,
            endTime: item.endDate,
            programName: item.fileName
          }
        })
        return _list
      } else {
        return []
      }
    },
    disableListArea() {
      const mediaType = this.areaId.split('-')[0]
      return !this.programMedia || mediaType === 'Extension'
    }
  },
  methods: {
    list2treeList(list, treePropLevelArr, firstProp) {
      let _id = 1 // 用于生成树的key

      function _genTree(currProp, data) {
        const currPropIndex = treePropLevelArr.indexOf(currProp)
        const _o = {}
        _o._id = _id++
        _o[firstProp] = data[currProp]
        _o.children = []
        if (treePropLevelArr.indexOf(currProp) === treePropLevelArr.length - 1) { // 最后一个
          _o.children.push({
            _id: _id++,
            ...data
          })
        } else {
          _o.children.push(_genTree(treePropLevelArr[currPropIndex + 1], data))
        }
        return _o
      }

      return list.reduce((arr, item) => {
        let sameItemMap = Array(treePropLevelArr.length)
        for (let index = 0; index < treePropLevelArr.length; index++) { // 按treePropLevelArr进行比对
          if (index === 0) { // 第一位在arr第一层找且对比firstProp
            sameItemMap[index] = arr.find(i => i[firstProp] === item[firstProp])
          } else { // 否则跟前一值作比对
            sameItemMap[index] = sameItemMap[index - 1].children.find(i => i[firstProp] === item[treePropLevelArr[index]])
          }

          if (!sameItemMap[index]) { // 没找到就以自身创建树
            if (index === 0) {
              arr.push(_genTree(treePropLevelArr[index], item))
            } else {
              sameItemMap[index - 1].children.push(_genTree(treePropLevelArr[index], item))
            }
            return arr // 跳出此项循环
          } else {
            if (index !== treePropLevelArr.length - 1) { // 如果不是最后一层对比则进入下一层对比
              continue
            } else { // 最后一项也匹配正确就直接推入
              sameItemMap[index].children.push({
                _id: _id++,
                ...item
              })
              return arr // 跳出循环
            }
          }
        }
      }, [])
    },
    openDialog(type) {
      console.log(this.programMedia)
      if (this.$parent.opType === '4') return ;

      // 测试功能 之后请注释下行
      // return this.$emit('chooseMedia')

      const dialogName = type+'Dialog'
      if (this[dialogName]) {
        this[dialogName] = {
          ...this[dialogName],
          show: true
        }
      }
    }
  },
  created() {
    this.$eventBus.$on('mkListLikeEidtShow', () => {
      if (this.disableListArea) return ;
      this.openDialog('edit')
    })
  },
  beforeDestroy() {
    this.$eventBus.$off('mkListLikeEidtShow')
  }
}
</script>

<style lang="scss" scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-box {
  padding-left: 20px;
  padding-right: 15px;
}
</style>